<template>
  <div key="id">
    <div class="flex align-items-center mb-10">
      <div class="mr-10">选项</div>
      <el-button size="small" circle :icon="Plus" @click="addOptionHandle" />
    </div>
    <div v-for="(item, index) in status" :key="index" class="flex align-items-center">
      <el-input placeholder="选项" class="mt-5 mb-5" v-model="textArr[index]" />
      <el-button type="danger" class="ml-10" size="small" :icon="Minus" circle @click="removeOption(index)" />
    </div>
  </div>
</template>

<script setup>
import { Plus, Minus } from '@element-plus/icons-vue';
import { ref, inject } from 'vue';
const props = defineProps({
  status: Array,
  configKey: String,
  id: String,
});
const textArr = ref(props.status);

const updateStatus = inject('updateStatus', () => {});

const addOptionHandle = () => {
  if (updateStatus) {
    updateStatus(props.configKey);
  }
};

const removeOption = (index) => {
  if (updateStatus) {
    updateStatus(props.configKey, index);
  }
};
</script>
